<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>修理</title>
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/mui.picker.min.css">
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/mui.picker.min.js"></script>
		<style>
			.huode{
				width:100%;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-icon mui-icon-right-nav mui-pull-right mui-icon mui-icon-phone" id="play"></a>
			<h1 class="mui-title">申请维修</h1>
		</header>
		<div class="mui-content" style="text-align: center;">
			<div style="width:80%; padding-left: 10%;">
				<img src="../image/photo.png" onclick="openCamera()" id="iii">
			</div>
			<div class="mui-row">
				<button style="width:100%" id="btn_type">类别</button>
			</div>
			<br>
			<textarea placeholder="输入故障描述, 包括具体地点、具体的信息等" id="text"></textarea>
			<button type="button" class="mui-btn mui-btn-primary" style="width:98%" onclick="submit()">提交</button>
		</div>
		<div style="height:50px"></div>
	</body>

	<script type="text/javascript">
		var uID;
		var temppath;
		let dataBase64;
		var ttt;
		mui.init();
		var mobileCamera;
		mui.plusReady(function() {
			uID = plus.storage.getItem('uID');
			mobileCamera = plus.camera.getCamera();
		});
		//打开手机摄像头 拍照
		function openCamera() {
			mobileCamera.captureImage(function(e) {
				plus.io.resolveLocalFileSystemURL(e, function(entry) {
					var path = entry.toLocalURL();
					// console.log(path);
					jQuery("#iii").attr('src', path); //图片替换
					jQuery("#iii").addClass("huode");
					getUrlBase64(path, function(base64) {
						dataBase64 = base64;
					});
				}, function(err) {
					console.log("读取拍照文件错误");
				});
			}, function(e) {
				console.log("er", err);
			}, function() {
				filename: '_doc/head.jpg';
			});
		}

		//将图片变成base64 
		function getUrlBase64(url, callback) {
			var canvas = document.createElement("canvas"); //创建canvas DOM元素
			var ctx = canvas.getContext("2d");
			var img = new Image();
			img.crossOrigin = 'Anonymous';
			img.src = url;
			img.onload = function() {
				ctx.drawImage(img, 0, 0, canvas.width, canvas.height); //参数可自定义
				var dataURL = canvas.toDataURL();
				callback.call(this, dataURL); //回掉函数获取Base64编码
				canvas = null;
			};
		}

		var picker = new mui.PopPicker();
		picker.setData([{
				value: "教学楼",
				text: "教学楼"
			},
			{
				value: "宿舍",
				text: "宿舍"
			},
			{
				value: "餐厅",
				text: "餐厅"
			},
			{
				value: "浴室",
				text: "浴室"
			},
			{
				value: "街道",
				text: "街道"
			},
			{
				value: "网络",
				text: "网络"
			}
		]);

		var btn = document.getElementById("btn_type");
		btn.addEventListener('tap', function(event) {
			picker.show(function(items) {
				ttt = items[0]["text"];
				btn.innerText = ttt;
			});
		}, false);

		//提交图片
		function submit() {
			var des = jQuery("#text").val();
			if (dataBase64 == undefined || dataBase64.length === 0) {
				mui.toast("请先拍照");
				return;
			}
			if (ttt == undefined || ttt.length === 0) {
				mui.toast("请选择类别");
				return;
			}
			if (des == undefined || des.length === 0) {
				mui.toast("请填写故障详细信息");
				return;
			}
			var obj = {
				'uID': uID,
				'category': ttt,
				'description': des,
				'picture': dataBase64,
				'issueTime': new Date(),
			};
			mui.ajax({
				url: 'http://120.27.247.180:8080/School/safeProblem/repair',
				type: "post",
				async: false,
				data: obj,
				dataType: "jsonp",
				contentType: "application/x-www-form-urlencoded; charset=utf-8",
				jsonp: "jsoncallback",
				success: function(data) {
					data = JSON.parse(data);
					if (data['suc']) {
						mui.alert('提交成功', '提示', function() {
							window.location.reload();
						});
					} else
						mui.toast("提交失败");
				},
				error: function() {
					mui.toast("服务器异常，请稍后再试");
				}
			});
		}
		
		document.getElementById("play").addEventListener('tap', function(e) {
			var btnArray = ["拨打","取消"];
			var phone = "15665855932";
			plus.device.dial(phone,false);
		});
	</script>
</html>
